<!-- 电磁态势总览页面 -->
<template>
<!--  <div class="electromagnetic-overview">
    &lt;!&ndash; 顶部标题栏 &ndash;&gt;
    <div class="overview-header">
      <div class="header-left">
        <h1 class="overview-title">
          <el-icon class="title-icon"><Aim /></el-icon>
          电磁态势总览
        </h1>
        <div class="status-info">
          <el-tag type="primary" size="small">实时监控</el-tag>
          <el-tag type="success" size="small" v-if="dataSync">
            <el-icon><Connection /></el-icon>
            数据同步
          </el-tag>
        </div>
      </div>

      <div class="header-actions">
        <el-button-group class="action-group">
          <el-button size="small" @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新数据
          </el-button>
          <el-button size="small" @click="exportReport">
            <el-icon><Document /></el-icon>
            导出报告
          </el-button>
          <el-button size="small" type="primary" @click="enterFullscreen">
            <el-icon><FullScreen /></el-icon>
            全屏模式
          </el-button>
        </el-button-group>
      </div>
    </div>

    &lt;!&ndash; 主内容区域 &ndash;&gt;
    <div class="overview-content">
      &lt;!&ndash; 左侧三维地球态势 &ndash;&gt;
      <div class="left-section">
        <div class="section-header">
          <h3>三维地球态势</h3>
          <div class="view-switcher">
            <el-radio-group v-model="viewMode" size="small">
              <el-radio-button value="3d">三维视图</el-radio-button>
              <el-radio-button value="2d">二维视图</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <CesiumGlobe
          ref="cesiumGlobeRef"
          :view-mode="viewMode"
          :track-data="trackData"
          :power-circles="powerCircles"
          :interference-heatmap="interferenceData"
          @markerClick="handleMarkerClick"
          @trackSelect="handleTrackSelect"
        />
      </div>

      &lt;!&ndash; 右侧多视图联动控制台 &ndash;&gt;
      <div class="right-section">
        &lt;!&ndash; 地图控制面板 &ndash;&gt;
        <div class="control-section map-control">
          <div class="section-header">
            <h4>地图控制</h4>
            <div class="sync-indicator" :class="{ active: mapSync }">
              <el-icon><Link /></el-icon>
              同步缩放
            </div>
          </div>
          <MapControlPanel
            :current-view="currentMapView"
            :zoom-level="mapZoomLevel"
            @viewChange="handleMapViewChange"
            @zoomChange="handleMapZoomChange"
            @layerToggle="handleLayerToggle"
          />
        </div>

        &lt;!&ndash; 频谱分析面板 &ndash;&gt;
        <div class="control-section spectrum-control">
          <div class="section-header">
            <h4>频谱分析</h4>
            <div class="frequency-display">
              {{ currentFrequency }} MHz
            </div>
          </div>
          <SpectrumChart
            ref="spectrumChartRef"
            :frequency-data="spectrumData"
            :selected-range="selectedFrequencyRange"
            @frequencyChange="handleFrequencyChange"
            @bandwidthSelect="handleBandwidthSelect"
          />
        </div>

        &lt;!&ndash; 波形分析面板 &ndash;&gt;
        <div class="control-section waveform-control">
          <div class="section-header">
            <h4>波形分析</h4>
            <div class="waveform-controls">
              <el-button size="mini" @click="playWaveform">
                <el-icon><VideoPlay /></el-icon>
              </el-button>
              <el-button size="mini" @click="pauseWaveform">
                <el-icon><VideoPause /></el-icon>
              </el-button>
              <el-button size="mini" @click="resetWaveform">
                <el-icon><RefreshRight /></el-icon>
              </el-button>
            </div>
          </div>
          <WaveformChart
            ref="waveformChartRef"
            :waveform-data="waveformData"
            :time-range="selectedTimeRange"
            :is-playing="isWaveformPlaying"
            @timeRangeChange="handleTimeRangeChange"
            @amplitudeSelect="handleAmplitudeSelect"
          />
        </div>
      </div>
    </div>

    &lt;!&ndash; 底部状态栏 &ndash;&gt;
    <div class="overview-footer">

      <div class="status-bar">
        <div class="status-left">
          <div class="status-item">
            <el-icon><Cpu /></el-icon>
            <span>设备: {{ activeDevices }}/{{ totalDevices }}</span>
          </div>
          <div class="status-item">
            <el-icon><Monitor /></el-icon>
            <span>信号: {{ activeSignals }}</span>
          </div>
          <div class="status-item">
            <el-icon><Warning /></el-icon>
            <span class="warning-text">告警: {{ alertCount }}</span>
          </div>
        </div>

        <div class="status-right">
          <div class="performance-stats">
            <span class="fps-counter">FPS: {{ currentFPS }}</span>
            <div class="network-status" :class="{ online: networkOnline }">
              <el-icon><Connection /></el-icon>
              {{ networkOnline ? '在线' : '离线' }}
            </div>
          </div>
        </div>
      </div>
    </div>

    &lt;!&ndash; 快速设置面板 &ndash;&gt;
    <transition name="slide">
      <div v-if="showQuickSettings" class="quick-settings-panel">
        <div class="settings-header">
          <span>快速设置</span>
          <el-button size="small" text @click="showQuickSettings = false">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        <div class="settings-content">
          <el-form size="small" label-width="6vw">
            <el-form-item label="刷新频率">
              <el-select v-model="refreshRate">
                <el-option label="1秒" value="1000" />
                <el-option label="2秒" value="2000" />
                <el-option label="5秒" value="5000" />
              </el-select>
            </el-form-item>
            <el-form-item label="视图同步">
              <el-switch v-model="mapSync" />
            </el-form-item>
            <el-form-item label="声音提醒">
              <el-switch v-model="soundAlert" />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </transition>
  </div>-->
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElNotification } from 'element-plus'
import {
  Aim,
  Connection,
  Refresh,
  Document,
  FullScreen,
  Link,
  VideoPlay,
  VideoPause,
  RefreshRight,
  Cpu,
  Warning,
  Close
} from '@element-plus/icons-vue'

// 导入子组件
import CesiumGlobe from './components/overview/CesiumGlobe.vue'
import MapControlPanel from './components/overview/MapControlPanel.vue'
import SpectrumChart from './components/overview/SpectrumChart.vue'
import WaveformChart from './components/overview/WaveformChart.vue'
import axios from 'axios'

const router = useRouter()

// 组件引用
const cesiumGlobeRef = ref(null)
const spectrumChartRef = ref(null)
const waveformChartRef = ref(null)

// UI状态
const dataSync = ref(true)
const viewMode = ref('3d')
const mapSync = ref(true)
const showQuickSettings = ref(false)
const isWaveformPlaying = ref(false)
const networkOnline = ref(true)
const soundAlert = ref(true)
const refreshRate = ref('2000')

// 地图状态
const currentMapView = ref({ lat: 39.9, lng: 116.4, zoom: 8 })
const mapZoomLevel = ref(8)

// 频谱和波形数据
const currentFrequency = ref(2450.0)
const selectedFrequencyRange = ref([2400, 2500])
const selectedTimeRange = ref([0, 100])

// 态势数据
const trackData = ref([
  { id: 'track1', type: 'aircraft', position: [116.4, 39.9, 10000], speed: 300, heading: 45 },
  { id: 'track2', type: 'ship', position: [116.5, 40.0, 0], speed: 25, heading: 90 },
  { id: 'track3', type: 'vehicle', position: [116.3, 39.8, 100], speed: 60, heading: 180 }
])

const powerCircles = ref([
  { center: [116.4, 39.9], radius: 50000, power: 85, type: 'radar' },
  { center: [116.5, 40.0], radius: 30000, power: 65, type: 'comm' },
  { center: [116.3, 39.8], radius: 20000, power: 45, type: 'jammer' }
])

const interferenceData = ref([
  { position: [116.4, 39.9], intensity: 0.8 },
  { position: [116.5, 40.0], intensity: 0.6 },
  { position: [116.3, 39.8], intensity: 0.4 },
  { position: [116.45, 39.95], intensity: 0.9 }
])

const spectrumData = ref(generateSpectrumData())
const waveformData = ref(generateWaveformData())

// 状态统计
const activeDevices = ref(12)
const totalDevices = ref(16)
const activeSignals = ref(8)
const alertCount = ref(2)
const currentFPS = ref(60)

// 生成模拟频谱数据
function generateSpectrumData() {
  const data = []
  for (let i = 2000; i <= 3000; i += 10) {
    data.push({
      frequency: i,
      power: -60 + Math.random() * 40 + 10 * Math.sin(i / 100)
    })
  }
  return data
}

// 生成模拟波形数据
function generateWaveformData() {
  const data = []
  for (let i = 0; i < 1000; i++) {
    data.push({
      time: i,
      amplitude: Math.sin(i * 0.1) + 0.3 * Math.sin(i * 0.5) + 0.1 * Math.random()
    })
  }
  return data
}

// 顶部操作
const refreshData = () => {
  ElMessage.success('数据刷新完成')
  // 刷新所有数据
  spectrumData.value = generateSpectrumData()
  waveformData.value = generateWaveformData()
}

const exportReport = () => {
  ElMessage.info('正在生成报告...')
  // 导出报告逻辑
}

const enterFullscreen = () => {
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen()
  }
}

// 地图交互
const handleMarkerClick = (marker) => {
  ElNotification({
    title: '设备信息',
    message: `设备ID: ${marker.id}, 类型: ${marker.type}`,
    type: 'info'
  })
}

const handleTrackSelect = (track) => {
  console.log('Selected track:', track)
}

const handleMapViewChange = (view) => {
  currentMapView.value = view
  if (mapSync.value && cesiumGlobeRef.value) {
    cesiumGlobeRef.value.syncView(view)
  }
}

const handleMapZoomChange = (zoom) => {
  mapZoomLevel.value = zoom
  if (mapSync.value && cesiumGlobeRef.value) {
    cesiumGlobeRef.value.syncZoom(zoom)
  }
}

const handleLayerToggle = (layer) => {
  console.log('Toggle layer:', layer)
}

// 频谱交互
const handleFrequencyChange = (frequency) => {
  currentFrequency.value = frequency
}

const handleBandwidthSelect = (range) => {
  selectedFrequencyRange.value = range
}

// 波形交互
const playWaveform = () => {
  isWaveformPlaying.value = true
  if (waveformChartRef.value) {
    waveformChartRef.value.play()
  }
}

const pauseWaveform = () => {
  isWaveformPlaying.value = false
  if (waveformChartRef.value) {
    waveformChartRef.value.pause()
  }
}

const resetWaveform = () => {
  isWaveformPlaying.value = false
  if (waveformChartRef.value) {
    waveformChartRef.value.reset()
  }
}

const handleTimeRangeChange = (range) => {
  selectedTimeRange.value = range
}

const handleAmplitudeSelect = (amplitude) => {
  console.log('Selected amplitude:', amplitude)
}



// 键盘快捷键
const handleKeydown = (event) => {
  if (event.key === 'F11') {
    event.preventDefault()
    enterFullscreen()
  } else if (event.key === 'Escape') {
    showQuickSettings.value = false
  } else if (event.ctrlKey && event.key === 'r') {
    event.preventDefault()
    refreshData()
  } else if (event.key === ' ' && !event.target.matches('input, textarea')) {
    event.preventDefault()
    playWaveform()
  }
}

onMounted(()=>{
  axios.post("http://localhost:3000/execute")
})

// 生命周期
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)

  // 模拟实时数据更新
  const dataUpdateInterval = setInterval(() => {
    if (dataSync.value) {
      // 更新状态统计
      currentFPS.value = 58 + Math.floor(Math.random() * 5)
      activeSignals.value = 6 + Math.floor(Math.random() * 4)

      // 随机生成告警
      if (Math.random() > 0.95) {
        alertCount.value++
        if (soundAlert.value && alertCount.value <= 5) {
          ElNotification({
            title: '新告警',
            message: '检测到异常信号',
            type: 'warning'
          })
        }
      }
    }
  }, parseInt(refreshRate.value))

  onBeforeUnmount(() => {
    clearInterval(dataUpdateInterval)
  })
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
/* 主容器 - 与导航栏共存 */
.electromagnetic-overview {
  width: 96vw;
  height: 100vh;
  background: #0a0f1b;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 4vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部标题栏 */
.overview-header {
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  background: linear-gradient(135deg, #1a2332, #0a0f1b);
  border-bottom: 1px solid #2d3a4b;
  box-shadow: 0 0.2vh 0.8vh rgba(0, 0, 0, 0.4);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.overview-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #00d4ff;
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.title-icon {
  font-size: 1.6rem;
  color: #00d4ff;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.header-actions .action-group .el-button {
  height: 3.2vh;
  font-size: 0.8rem;
}

/* 主内容区域 */
.overview-content {
  flex: 1;
  display: flex;
  gap: 1vw;
  padding: 1vh 1vw;
  min-height: 0;
}

/* 左侧三维地球区域 */
.left-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1a2332, #0f1419);
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vh 1.5vw;
  background: rgba(0, 212, 255, 0.1);
  border-bottom: 1px solid #2d3a4b;
}

.section-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #00d4ff;
  font-weight: 500;
}

.section-header h4 {
  margin: 0;
  font-size: 0.9rem;
  color: #00d4ff;
  font-weight: 500;
}

.view-switcher .el-radio-group {
  font-size: 0.8rem;
}

/* 右侧控制台区域 */
.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.control-section {
  background: linear-gradient(135deg, #1a2332, #0f1419);
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b;
  overflow: hidden;
}

.map-control {
  flex: 1;
  min-height: 20vh;
}

.spectrum-control {
  flex: 1.5;
  min-height: 25vh;
}

.waveform-control {
  flex: 1.5;
  min-height: 25vh;
}

.sync-indicator {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.8rem;
  color: #8591a3;
  transition: color 0.3s ease;
}

.sync-indicator.active {
  color: #00d4ff;
}

.frequency-display {
  font-size: 0.9rem;
  color: #00ff88;
  font-weight: 600;
}

.waveform-controls {
  display: flex;
  gap: 0.5vw;
}

.waveform-controls .el-button {
  padding: 0.3vh 0.8vw;
  font-size: 0.7rem;
}

/* 底部区域 */
.overview-footer {
  height: 6vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1vh 1vw;
  background: rgba(26, 35, 50, 0.5);
}



/* 状态栏 */
.status-bar {
  height: 4vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1vw;
  background: rgba(31, 45, 61, 0.8);
  border-radius: 0.4vh;
  font-size: 0.8rem;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #bfcbd9;
}

.warning-text {
  color: #f56c6c !important;
}

.performance-stats {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.fps-counter {
  color: #00ff88;
  font-weight: 600;
}

.network-status {
  display: flex;
  align-items: center;
  gap: 0.3vw;
  color: #f56c6c;
}

.network-status.online {
  color: #00ff88;
}

/* 快速设置面板 */
.quick-settings-panel {
  position: fixed;
  top: 8vh;
  right: 2vw;
  width: 25vw;
  background: linear-gradient(135deg, #1a2332, #0f1419);
  border: 1px solid #2d3a4b;
  border-radius: 0.8vh;
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.5);
  z-index: 2000;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5vh 1.5vw;
  border-bottom: 1px solid #2d3a4b;
  font-weight: 600;
  color: #00d4ff;
}

.settings-content {
  padding: 1.5vh 1.5vw;
}

/* 过渡动画 */
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from, .slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}

/* Element Plus 组件深色主题覆盖 */
.electromagnetic-overview :deep(.el-button) {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.electromagnetic-overview :deep(.el-button:hover) {
  background: rgba(0, 212, 255, 0.2) !important;
  border-color: #00d4ff !important;
  color: #00d4ff !important;
}

.electromagnetic-overview :deep(.el-button--primary) {
  background: #00d4ff !important;
  border-color: #00d4ff !important;
  color: #0a0f1b !important;
}

.electromagnetic-overview :deep(.el-tag) {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.electromagnetic-overview :deep(.el-tag--primary) {
  background: rgba(0, 212, 255, 0.2) !important;
  color: #00d4ff !important;
}

.electromagnetic-overview :deep(.el-tag--success) {
  background: rgba(0, 255, 136, 0.2) !important;
  color: #00ff88 !important;
}

.electromagnetic-overview :deep(.el-radio-button__inner) {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.electromagnetic-overview :deep(.el-radio-button__original:checked + .el-radio-button__inner) {
  background: #00d4ff !important;
  color: #0a0f1b !important;
}

.electromagnetic-overview :deep(.el-select .el-input__wrapper) {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: #2d3a4b !important;
}

.electromagnetic-overview :deep(.el-select .el-input__inner) {
  color: #bfcbd9 !important;
}

.electromagnetic-overview :deep(.el-switch.is-checked .el-switch__core) {
  background: #00d4ff !important;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .overview-content {
    flex-direction: column;
    gap: 1vh;
  }

  .left-section {
    flex: none;
    height: 50vh;
  }

  .right-section {
    flex: none;
    height: 35vh;
    flex-direction: row;
    gap: 1vw;
  }

  .control-section {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .electromagnetic-overview {
    width: 96vw;
    left: 4vw;
  }

  .overview-header {
    height: 8vh;
  }

  .quick-settings-panel {
    width: 88vw;
    right: 1vw;
  }
}
</style>
